<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、分页</h3>
        <div>
          <h4>1.1、完整功能</h4>
          <div class="block">
            <span class="demonstration">完整功能</span>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination> -->

            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[30, 60, 90, 120]" :page-size="100" @prev-click="prevClickChange" @next-click="nextClickChange" :current-page.sync="currentPage4" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="400"></el-pagination>
          </div>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、级联选择器</h3>

      </el-col>

    </el-row>

  </div>
</template>

<script>

export default {
  data () {
    return {

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4

    }
  },


  methods: {



    //点击上一页
    prevClickChange (val) {
      console.log(`每页 ${val} 条`);
    },
    //点击下一页
    nextClickChange (val) {
      console.log(`每页 ${val} 条`);
    },

    //每页多少条
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },

    //跳转
    handleCurrentChange (val) {
      console.log(`每页 ${val} 条`);
    }

  }


}
</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>